const merge = require('webpack-merge');
const tsImportPluginFactory = require('ts-import-plugin');
const path = require('path');
const sourceMap = process.env.NODE_ENV === 'development';
const px2rem = require('postcss-px2rem');

module.exports = {
  publicPath: './',
  outputDir: 'dist',
  devServer: {
    proxy: {
      '/wechatpageservice': {
        target: 'https://wechattest.chinalife-p.com.cn',
        changeOrigin: true,
      },
    },
    open: true,
  },

  chainWebpack: (config) => {
    config.module
      .rule('ts')
      .use('ts-loader')
      .tap((options) => {
        options = merge(options, {
          transpileOnly: true,
          getCustomTransformers: () => ({
            before: [
              tsImportPluginFactory({
                libraryName: 'vant',
                libraryDirectory: 'es',
                style: true,
              }),
            ],
          }),
          compilerOptions: {
            module: 'es2015',
          },
        });
        return options;
      });
    config.resolve.alias.set('assets', path.resolve(__dirname, './src/assets'));
  },
  //是否生成map文件
  productionSourceMap: sourceMap,
  css: {
    sourceMap: false,
    loaderOptions: {
      postcss: {
        plugins: [px2rem({ remUnit: 37.5 })],
      },
    },
  },

  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, './src/style/variables.less')],
    },
  },
};
